<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="Cache-Control" content="no-transform" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<!--uc强制竖屏-->
	<meta name="screen-orientation" content="portrait">
	<!--QQ强制竖屏-->
	<meta name="x5-orientation" content="portrait">
	<meta name="format-detection" content="telephone=no,email=no">
	<link rel="stylesheet" href="css/public.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/date.css">
	<title>个人中心</title>
	<style>
		.form-control1,
		.form-control {
			display: inline;
			outline: none;
			border: none !important;
			width: 3.4rem;
			height: 1.6rem;
			padding: 0.3rem;
			font-size: 0.6rem;
			line-height: 1.6rem;
			color: #555;
			background-color: #fff;
			background-image: none;
			/* border: .05rem solid #ccc; */
			/* border-radius: 4px; */
			position: absolute;
			right: 2%;
		}

		.form-control option {
			background: #fff;
		}

		.checkbox-group {
			display: inline-block;
			float: right;
			height: 1.8rem;
		}

		.checkbox-group input {
			display: none;
			opacity: 0;
		}

		.checkbox-group input[type=checkbox]+label,
		.checkbox-group input[type=radio]+label {
			line-height: 1.8rem;
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			/*cursor: pointer;*/
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			margin: 2px;
		}

		.checkbox-group input[type=checkbox]+label:before,
		.checkbox-group input[type=radio]+label:before {
			line-height: 20px;
			display: inline-block;
			width: 18px;
			height: 18px;
			margin-right: 8px;
			content: '';
			color: #fff;
			border: 1px solid #dce4e6;
			background-color: #f3f6f8;
			border-radius: 3px;
		}

		.checkbox-group input[type=checkbox]:checked+label:before,
		.checkbox-group input[type=radio]:checked+label:before {
			/*content:'\2022';圆点*/
			content: '\2713';
			color: #fff;
			background-color: #31b968;
			border-radius: 3px;
			font-size: 16px;
			text-align: center;
			border-color: #31b968;
		}
	</style>
</head>

<body class='bg_color01'>
	<div class="hd">
		<a href=""><img src="images/public_lt.png" alt=""></a>
		<h4>个人中心</h4>
	</div>


	<div class='information_content'>
		<div class='information_wrapper'>
			<p class='personalMation'>本人信息</p>
			<div class='information_list information_list1'>
				<div><b>姓名</b> <input type="text" placeholder="必填" value="李超"></div>
				<div class='telNum'><b>手机号</b> <input type="text" placeholder="必填" value="12345678912"></div>
				<div class='registeCode' style='display: none;'><button class='getCode'>请输入验证码</button><input
						type="text" placeholder="必填"></div>
				<div><b>性别</b>
					<select name="" class="form-control">
						<option value="0">男</option>
						<option value="1">女</option>
					</select>
				</div>
				<div><b>生日</b> <input type="text" id="date3"
						data-options="{'type':'YYYY-MM-DD','beginYear':2010,'endYear':2088}">
				</div>
			</div>
			<div class='information_wrapper'>
				<p>宝宝1信息</p>
				<div class='information_list'>
					<div><b>宝宝小名</b> <input type="text" placeholder="选填" value="胖胖"></div>
					<div><b>宝宝生日</b> <input type="text" id="date4"
							data-options="{'type':'YYYY-MM-DD','beginYear':2010,'endYear':2088}"></div>
					<div><b>性别</b>
						<select name="" class="form-control">
							<option value="0">男</option>
							<option value="1">女</option>
						</select>
					</div>
					<div class='information_object'>
						<div><b>生日优惠对象</b>
							<!-- <select name="" class="form-control1">
								<option value="0">宝宝1</option>
								<option value="1">宝宝2</option>
							</select> -->
							<div class="checkbox-group"> <input type="radio" class="dian" id="one" name="dan" /> <label
									for="one">记住密码</label> </div>
						</div>
					</div>
					<div class='yellowFont'><b class='addBaby'>+添加宝宝</b></div>
				</div>
			</div>
			<div class='information_wrapper information_wrapper2' style='display: none;'>
				<p class='removeTitle1'>宝宝2信息</p>
				<div class='information_list'>
					<div><b>宝宝小名</b> <input type="text" placeholder="选填" value="瘦瘦"></div>
					<div><b>宝宝生日</b> <input type="text" id="date5"
							data-options="{'type':'YYYY-MM-DD','beginYear':2010,'endYear':2088}">
					</div>
					<div><b>性别</b>
						<select name="" class="form-control">
							<option value="0">男</option>
							<option value="1">女</option>
						</select>
					</div>
					<div class='information_object'>
						<div><b>生日优惠对象</b>
							<!-- <select name="" class="form-control1">
								<option value="0">宝宝1</option>
								<option value="1">宝宝2</option>
							</select> -->
							<div class="checkbox-group"> <input type="radio" class="dian" id="one" name="dan" /> <label
									for="one">记住密码</label> </div>
						</div>
					</div>
					<div class='yellowFont'>
						<b>
							<span class='informatio_del'>删除宝宝</span>
						</b>
					</div>
				</div>
			</div>

			<div class='information_isSelect'>
				<b>喜欢的系列</b>
				<ul class='aaa'>
					<li>城市系列</li>
					<li>星战系列</li>
					<li>忍者系列</li>
					<li>得宝系列</li>
					<li>好朋友系列</li>
				</ul>
			</div>

			<button class='informatio_btn '>保存</button>
		</div>

		<script src="js/rem.js"></script>
		<script src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.mindata.js"></script>
		<script type="text/javascript" src="js/jquery.date.js"></script>
		<script>
			$(function () {


				var time = 0
				$('.getCode').click(function () {
					if (time == 0) {
						time = 60
						var timer = setInterval(function () {
							time--
							if (time == 0) {
								$('.getCode').text('获取验证码')
								clearInterval(timer)
							} else {
								$('.getCode').text('还剩' + time + '秒')
							}
						}, 1000)
					}
				})


				var a = false
				$('.dian').click(function () {
					console.log('aaa')
					console.log($('.dian')[0].checked)
					a = !a
					$('.dian')[0].checked = a
					$('.dian')[1].checked = !a
				})


				$('.telNum').click(function () {
					$('.registeCode').css('display', 'block')
				})


				$('li').click(function () {
					$(this).toggleClass('addbgColor')
					console.log($(".aaa li.addbgColor"))
					if ($(".aaa li.addbgColor").length != 0) {
						$('.informatio_btn').addClass('informatio_changeColor')
					} else {
						$('.informatio_btn').removeClass('informatio_changeColor')
					}
				})
				$('.addBaby').click(function (e) {
					console.log(e)
					console.log($('.addBaby'))
					$('.information_wrapper2').css('display', 'block')

				})
				$('.addBaby1').click(function (e) {
					console.log(e)
					console.log($('.addBaby'))
					$('.information_wrapper3').css('display', 'block')

				})
				$('.informatio_del').click(function () {
					console.log($(this).parent().parent())
					$(this).parent().parent().parent().parent().css('display', 'none')


				})
				$('.informatio_del1').click(function () {
					$(this).parent().parent().parent().css('display', 'none')

				})





				// 时间下拉框
				$.date('#date3');
				$.date('#date4');
				$.date('#date5');



			})
		</script>
</body>

</html>